/* eslint-disable prettier/prettier */
import React, { useState, useRef, useEffect } from 'react';
import { View, Button, Animated, StyleSheet, Touchable, TouchableOpacity, Image ,Text} from 'react-native';
import MyIcon from './svg';
const FloatingButton = ({text, sthis, func,color}) => {
  const [animationValue] = useState(new Animated.Value(0)); // 初始化动画值

  const animate = () => {
    const currentOffset = animationValue._value;
    Animated.timing(animationValue, {
      toValue: currentOffset + 30, // 向前移动20个单位
      duration: 1000, // 动画持续时间1秒
      useNativeDriver: true, // 使用原生驱动
    }).start(() => {
      // 动画完成后反向动画
      Animated.timing(animationValue, {
        toValue: currentOffset, // 回到初始值
        duration: 1000,
        useNativeDriver: true,
      }).start(animate); // 反向动画完成后再次调用animate
    });
  };

  useEffect(() => {
    animate(); // 组件加载后开始动画
  }, []);

  return (
    <Animated.View style={[styles.container, {
      transform: [{ translateY: animationValue }], // 使用动画值
    }]}>
      <TouchableOpacity
        onPress={() => func(sthis)}>
        <View style={{alignContent:'center',justifyContent:'center'}}>
          <Text style={{color:color,position: 'absolute',alignContent:'center',justifyContent:'center',fontSize:20,left:20,}}>{text}</Text>
          <MyIcon color={color} />
        </View>
      </TouchableOpacity>
    </Animated.View>
  );
};

const styles = StyleSheet.create({
  container: {
    height: 80,
    width: 80,
    justifyContent: 'center',
    alignItems: 'center',
    marginLeft: 10,
    marginRight: 10,
  },
  button: {
    height: 100,
    width:100,
  },
  text: {
    color: '#fff', // 文本颜色设置成白色，确保可见性
    fontWeight: 'bold', // 加粗字体
    fontSize: 16, // 设置字体大小
  },
});

export default FloatingButton;
